<template>
  <div class="whole">
    <div class="whole-loading-wrap" data-mu-loading-color="#265cff" v-loading="loading1" data-mu-loading-overlay-color="#fff"></div>
    <div class="whole-no-content" v-if="false">
      <img class="" src="http://image.xuexiwangzhe.com/FjNdtPEG6rHwZaqTd1Pa54FcFTdJ"><br>
      暂无讨论
    </div>
    <div class="comment-list" v-if="!loading1">
      <comment-item v-for="item,index in 1" :key="index" v-on="$listeners"></comment-item>
    </div>
  </div>
</template>

<script>
import commentItem from "../components/comment-item";

export default {
  components: {
    commentItem
  },
  data() {
    return {
      loading1: true,// 加载动画
    }
  },
  created() {
    setTimeout(() => {
      this.loading1 = false;
    }, 1000)
  },
  methods: {
  }
  
}
</script>

<style lang="less">
  .whole {
    color: #333333;
    min-height: 487px;
    position: relative;
  }
  .whole-loading-wrap {
    position: relative;
    
    .mu-loading-wrap {
      height: 487px;
    }
    .mu-circular-progress.mu-inverse.mu-loading-circular {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .whole-no-content {
    text-align: center;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    img {
      width: 210px;
      height: 210px;
    }
  }

</style>